<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card v-loading="loading">
                    <div slot="header" class="clearfix">
                        <el-breadcrumb separator="/" class="inline_block" style="line-height: 30px">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                        </el-breadcrumb>
                        <el-button class="right" @click="dialogTableVisible=true">修改密码</el-button>
                    </div>

                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="用户名">
                            <el-input v-model="form.username" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="form.name" placeholder="请输入昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="权限">
                            <el-tag v-if="form.role=='1'">管理员</el-tag>
                            <el-tag v-else type="danger">用户</el-tag>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="form.mail" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                        <el-form-item label="注册时间">
                            <span>{{form.re_data}}</span>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">修改</el-button>
                        </el-form-item>
                    </el-form>

                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div slot="header" class="clearfix" style="line-height: 20px;font-size: 14px;">
                        登录历史
                    </div>
                    <el-table :data="history" style="width: 100%" height="315px">
                        <el-table-column
                                prop="time"
                                label="时间">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                width="180">
                        </el-table-column>
                    </el-table>
                </el-card>

            </el-col>
        </el-row>

        <el-dialog title="修改密码" :visible.sync="dialogTableVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="原密码">
                    <el-input v-model="form.password" placeholder="请输入原密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="原密码">
                    <el-input v-model="form.newpwd1" placeholder="请输入新密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="原密码">
                    <el-input v-model="form.newpwd2" placeholder="请输入重复密码" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePwd" :loading="pwdLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "info",
        data() {
            return {
                dialogTableVisible: false,
                loading: false,
                pwdLoading: false,
                form: {},
                history: []
            }
        },
        methods: {
            init() {
                this.getData()
                this.getHistory()
            },
            getData() {
                const _this = this
                this.loading = true
                this.$request({
                    url: '/api/user/info.do', method: 'post',
                }).then(res => {
                    _this.form = res
                }).finally((error) => {
                    this.loading = false
                })
            },
            getHistory() {
                const _this = this
                this.loading = true
                this.$request({
                    url: '/api/user/login_history.do', method: 'post',
                }).then(res => {
                    _this.history = res
                }).finally((error) => {
                    this.loading = false
                })
            },
            onSubmit() {
                const _this = this
                this.loading = true
                this.$request({
                    url: '/api/user/update_user.do', method: 'post', data: _this.form
                }).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }).finally(() => {
                    this.loading = false
                })
            },
            changePwd() {
                const _this = this
                this.pwdLoading = true
                this.$request({
                    url: '/api/user/change_password.do', method: 'post', data: _this.form
                }).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.dialogTableVisible = false
                }).finally(() => {
                    this.pwdLoading = false
                })
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style scoped>

</style>
